<template>
    <div class="page">
        <div class="nav">
            <div class="back" @click="goBack">
                <van-icon name="arrow-left" />
            </div>
            <div class="nav-item">
                <span  @click="goBack">商品</span>
                <span :class="tabindex==1?'nav-active':''" @click="changeTab(1)">详情</span>
                <span :class="tabindex==2?'nav-active':''" @click="changeTab(2)">评价</span>
            </div>
            <div></div>
        </div>
        <!-- 更多详情 -->
        <div class="details" v-if="tabindex==1" >
            <div class="details-img-337854828" v-html = "html"></div>
            <!-- <div class="productTag">
                <div class="productTag-item">
                    <div class="productTag-item-child">
                        <span>品牌：</span>
                        <span>iqos</span>
                    </div>
                </div>
                <div class="productTag-item">
                    <div class="productTag-item-child">
                        <span>品牌：</span>
                        <span>iqos</span>
                    </div>
                </div>
                <div class="productTag-item">
                    <div class="productTag-item-child">
                        <span>原产地：</span>
                        <span>日本</span>
                    </div>
                    <div class="productTag-item-child">
                        <span>净含量：</span>
                        <span>150g</span>
                    </div>
                </div>
                <div class="productTag-item">
                    <div class="productTag-item-child">
                        <span>保质期：</span>
                        <span>日本</span>
                    </div>
                    <div class="productTag-item-child">
                        <span>发货地：</span>
                        <span>150g</span>
                    </div>
                </div>
            </div>

            <div class="productTishi">
                <p>FDFDFDFDFDFDF</p>
                <p>DFDSFDSFDSFSDFDS</p>
                <p>专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜专柜</p>
            </div>
            <div class="productImg">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
            </div>
            <div class="other">
                <div class="other-shuoming">其他说明</div>
                <div class="other-item">
                    <p>1.详情详情详情详情详情详情详情详情详情详情详情详情</p>
                    <p>1.详情详情详情详情详情详情详情详情详情详情详情详情</p>
                    <p>1.详情详情详情详情详情详情详情详情详情详情详情详情</p>
                </div>
            </div> -->
        </div>
        <!-- 评论 -->
        <div class="comment" v-if="tabindex==2">
            <!-- <div class="comment-top">
                <span>宝贝评价</span>
                <span>查看全部></span>
            </div>
            <div class="comment-tip">
                <div class="comment-tip-left">
                    <img src="@/assets/1.png" alt="">
                    <span>xxxxxxx</span>
                    <van-rate  />
                </div>
                <div class="comment-tip-right">
                    2019-10-1
                </div>
                
            </div>
            <div class="comment-content">
                    内容内容
            </div>
            <div class="comment-img">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
            </div>
            <div class="comment-guige">
                黑色：L
            </div> -->
            <div style="text-align:center; padding:0.8rem; color: #B3B5B8;">本商品暂无评价</div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "ProductMore",
        data() {
            return {
                tabindex: 1,
                html: ''
            }
        },
        created(){
          this.html = this.$route.params.content
          // console.log(this.$route.params.sign)
          this.tabindex = this.$route.params.sign
        },
        methods:{
            changeTab(index){
                this.tabindex=index
            },
            goBack(){
              this.$router.back()
            }
        }

    };
</script>
<style>
/*商品详情图片*/
.details-img-337854828{
  width: 100%;
}
.details-img-337854828 img{
  display: block;
  width: 100%;
}
/*商品详情图片*/
</style>
<style scoped>
    .nav{display: flex;justify-content: space-between;align-items: center;height: 0.88rem;line-height: 0.88rem;padding: 0 0.3rem; font-size: 0.32rem;border-bottom: 1px solid #e6e6e6;}
    .nav-item span{display: inline-block;height: 100%;}
    .nav-item span:nth-child(2){margin-left: 0.5rem;margin-right: 0.5rem;}
    .nav-active{border-bottom: 1px solid #F52E67}
    .productTag{padding: 0.3rem;}
    .productTag-item{height:1rem;line-height: 1rem;border-bottom: 1px solid #e6e6ee;font-size: 0.28rem;display: flex;}
    .productTag-item-child:nth-child(1){margin-right: 1rem;}
    .productTishi{padding: 0.60rem;box-sizing: border-box;background: #FFF7D0}
    .productTishi p:nth-child(1){font-size: 0.4rem;text-align: center;color: #B0A891}
    .productTishi p:nth-child(2){font-size: 0.25rem;text-align: center;color: #B0A891}
    .productTishi p:nth-child(3){font-size: 0.25rem;text-align: center;margin-top: 0.3rem;}
    .productImg img{width: 100%;height: 7.5rem;}
    .productImg img:nth-child(1){margin-bottom: 0.8rem;}
    .other{padding: 0.3rem;}
    .other-shuoming{font-size: 0.28rem;font-weight: Bold}
    .other-item p{font-size: 0.26rem;margin-top: 0.2rem;}
    /* 评论 */
    .comment{padding: 0.3rem;}
    .comment-top{display: flex;justify-content: space-between;}
    .comment-top span:nth-child(1){font-size: 0.28rem;color: #191E2A;}
    .comment-top span:nth-child(2){font-size: 0.28rem;color: #9FA0A5;}
    .comment-tip{display: flex;justify-content: space-between;align-items: center;margin-top: 0.7rem;}
    .comment-tip-left{display: flex;align-items: center;}
    .comment-tip-left img{width: 0.56rem;height: 0.56rem;display: flex;align-items: center;}
    .comment-tip-left span:nth-child(2){    margin-left: 0.2rem;     margin-right: 0.2rem;
    }
    .comment-content{font-size: 0.28rem;padding: 0.2rem 0;}
    .comment-img img{width: 2.1rem;height: 2.1rem;margin-right: 0.2rem;}
    .comment-img img:nth-child(3n){margin-right: 0;}
    .comment-guige{width: 1.15rem;height: 0.3rem;line-height: 0.3rem;background: #EFF0F1;color: #CCCED0;text-align: center;}
    /* 评论结束 */
</style>


